<template>
  <div class="goods">
    <span v-if="activeKey === 0"> | 推荐商品</span>
    <span v-else-if="activeKey === 1"> | 活动商品</span>
    <span v-else-if="activeKey === 2"> | 定时秒杀</span>
    <span v-else-if="activeKey === 3"> | 热销</span>
    <span v-else-if="activeKey === 4"> | 蔬菜</span>
    <span v-else-if="activeKey === 5"> | 水果</span>
    <span v-else-if="activeKey === 6"> | 休闲零食</span>
    <span v-else> | 活动商品</span>
    <!-- 商品信息 -->
    <div class="shop-info" v-for="item in goodsList" :key="item.id">
      <van-image
        slot="bottom"
        width="100%"
        height="150"
        cover
        :src="item.url"
      />
      <div class="name-price">
        <span class="name">{{ item.name }}</span>
        <span class="price">
          <span class="newprice"
            >秒杀价￥{{ item.seckill_price }}
            <del class="oldprice">{{ item.old_price }}</del></span
          >
        </span>
      </div>
      <div>
        <div class="number-add">
          <span class="number"
            >月销量:{{ item.sell_num }} 剩余:{{ item.balance_num }}</span
          >
          <span class="count-down" v-show="activeKey === 2"
            >秒杀倒计时：<van-count-down color="red" :time="time"
          /></span>
          <span class="add" @click="addCountById(item.id)"> + </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      time: 30 * 60 * 60 * 1000,
      my_value: this.value
    }
  },
  computed: {
    ...mapState('m_home', ['homeData', 'activeKey', 'goodsList'])
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    ...mapMutations('m_home', ['addCount']),
    addCountById(id) {
      this.addCount(id)
    }
  }
}
</script>

<style scoped lang="less">
.goods {
  position: absolute;
  top: 0;
  margin-bottom: 500px;
  left: 175px;
  width: 565px;
  padding-bottom: 80px;
  height: 60vh;
  overflow-y: auto;
  span {
    display: block;
    font-size: 24px;
    margin-bottom: 10px;
  }
  .shop-info {
    border: 1px solid #eee;
    padding: 5px;
    background-color: #e4e4e4;
    margin-bottom: 5px;
    .name-price {
      display: flex;
      justify-content: space-between;
      .newprice {
        color: red;
      }
    }
    .number-add {
      display: flex;
      justify-content: space-between;
      position: relative;
      .count-down {
        position: absolute;
        left: 240px;
        bottom: 7px;
        display: inline-block;
        margin: 0;
        color: red;
        .van-count-down {
          display: inline-block;
        }
      }
      .add {
        display: block;
        width: 30px;
        height: 30px;
        font-size: 40px;
        text-align: center;
        line-height: 30px;
        color: #14d26b;
        border: 2px solid #14d26b;
        margin-right: 5px;
        margin-bottom: 5px;
      }
    }
  }
}
/deep/.goods-list {
  height: 1000px;
}
</style>
